<template>
  <div class="dashboard-container">
    <!-- 轮播Banner区域 -->
    <div class="banner-section w-full flex">
      <el-carousel style="flex: 1;" :interval="5000" height="559px" indicator-position="" arrow="always"
        :autoplay="true">
        <el-carousel-item v-for="(banner, index) in bannerList" :key="index">
          <div class="banner-image-item">
            <img :src="banner.image" :alt="banner.title" class="banner-image" />
            <div class="banner-overlay">
              <div class="banner-info">
                <h2 class="banner-overlay-title">{{ banner.title }}</h2>
                <p class="banner-overlay-description">{{ banner.description }}</p>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div style="width: 500px;margin-left: 20px;">
        <!-- 六宫格功能区域 -->
        <div class="hexagon-section">
          <el-card class="hexagon-card" shadow="hover" style="background: #fff;">
            <template #header>
              <div>
                <div class="filter-controls flex align-center justify-between">
                  <div class="flex align-center">
                    <el-select v-model="selectedAdvertiser" placeholder="选择主体" style="width: 120px;margin-right: 20px;"
                      @change="fetchDashboardStats">
                      <el-option :label="item.account_name" :value="item.account_id"
                        v-for="(item, index) in account_name_arr" />
                    </el-select>

                    <el-select v-model="selectedDays" placeholder="选择时间范围" style="width: 120px">
                      <el-option label="昨天" value="-1" />
                      <el-option label="今天" value="1" />
                      <el-option label="近7天" value="7" />
                      <el-option label="近30天" value="30" />
                    </el-select>

                  </div>
                  <el-button type="primary" :loading="statsLoading || chartLoading" @click="refreshAllData"
                    size="small">
                    <el-icon>
                      <Refresh />
                    </el-icon>
                    刷新数据
                  </el-button>
                </div>
              </div>
            </template>
            <div class="hexagon-grid">
              <!-- 第一行 -->
              <div class="hexagon-item data-item">
                <div class="hexagon-icon">
                  <el-icon>
                    <Money />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">¥{{ formatNumber(dailyCost) }}</div>
                  <div class="hexagon-data-label">总消耗</div>
                </div>
              </div>

              <div class="hexagon-item data-item" :title="'总曝光不支持筛选'">
                <div class="hexagon-icon">
                  <el-icon>
                    <View />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">{{ formatNumber(totalImpressions) }}</div>
                  <div class="hexagon-data-label">总曝光</div>
                </div>
              </div>

              <!-- 第二行 -->
              <div class="hexagon-item data-item">
                <div class="hexagon-icon">
                  <el-icon>
                    <Mouse />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">{{ formatNumber(totalClicks) }}</div>
                  <div class="hexagon-data-label">总点击</div>
                </div>
              </div>

              <div class="hexagon-item data-item">
                <div class="hexagon-icon">
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">{{ clickRate }}%</div>
                  <div class="hexagon-data-label">点击率</div>
                </div>
              </div>

              <!-- 第三行 -->
              <div class="hexagon-item data-item">
                <div class="hexagon-icon">
                  <el-icon>
                    <User />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">{{ formatNumber(potentialCustomers) }}</div>
                  <div class="hexagon-data-label">意向客户数</div>
                </div>
              </div>

              <div class="hexagon-item data-item">
                <div class="hexagon-icon">
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                </div>
                <div class="hexagon-content">
                  <div class="hexagon-data-value">{{ formatNumber(new_wechat_num) }}</div>
                  <div class="hexagon-data-label">新增用户数</div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

      <!-- 核心数据驾驶舱区域
    <div class="stats-section">
      <div class="stats-header">
        <div class="stats-title-row">
          <h2 class="stats-title">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            核心广告数据驾驶舱
          </h2>
          <el-button type="primary" :loading="statsLoading || chartLoading" @click="refreshAllData" size="small">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新数据
          </el-button>
        </div>

        <div class="filter-controls">


          <el-select v-model="selectedAdvertiser" placeholder="选择主体" style="width: 120px" @change="fetchDashboardStats">
            <el-option :label="item.account_name" :value="item.account_id" v-for="(item, index) in account_name_arr" />
          </el-select>

          <el-select v-model="selectedDays" placeholder="选择时间范围" style="width: 120px">
            <el-option label="昨天" value="-1" />
            <el-option label="今天" value="1" />
            <el-option label="近7天" value="7" />
            <el-option label="近30天" value="30" />
          </el-select>
        </div>
      </div>

      <div class="stats-cards" v-loading="statsLoading">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon daily-cost">
              <el-icon>
                <Money />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">¥{{ formatNumber(dailyCost) }}</div>
              <div class="stat-label">总消耗</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon total-impressions">
              <el-icon>
                <View />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(totalImpressions) }}</div>
              <div class="stat-label">总曝光</div>

            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon total-clicks">
              <el-icon>
                <Mouse />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(totalClicks) }}</div>
              <div class="stat-label">总点击</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon click-rate">
              <el-icon>
                <TrendCharts />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ clickRate }}%</div>
              <div class="stat-label">点击率</div>
            </div>
          </div>
        </el-card>





        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(potentialCustomers) }}</div>
              <div class="stat-label">意向客户数</div>
            </div>
          </div>
        </el-card>





        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(new_wechat_num) }}</div>
              <div class="stat-label">新增用户数</div>

            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(account_num) }}</div>
              <div class="stat-label">广告主体数量</div>

            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(ad_account_num) }}</div>
              <div class="stat-label">账户数量</div>
            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ ad_group_num }}</div>
              <div class="stat-label">广告组数量</div>
            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ creative_num }}</div>
              <div class="stat-label">创意数量</div>
            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content" style="width: 220px;">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ preview_conversions_count }}</div>
              <div class="stat-label" style="width: 200px;">目标转化量</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-content" style="width: 250px;">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ preview_deep_conversions_count }}</div>
              <div class="stat-label" style="width: 200px;">深度目标转化量</div>
            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content" style="width: 250px;">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ conversions_by_click_rate }}</div>
              <div class="stat-label" style="width: 200px;">目标转化率</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-content" style="width: 250px;">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ conversions_by_click_cost }}</div>
              <div class="stat-label" style="width: 200px;">目标转化成本</div>
            </div>
          </div>
        </el-card>


        <el-card class="stat-card" shadow="hover">
          <div class="stat-content" style="width: 250px;">
            <div class="stat-icon potential-customers">
              <el-icon>
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ conversions_by_click_count }}</div>
              <div class="stat-label" style="width: 200px;">目标转化量</div>
            </div>
          </div>
        </el-card>

      </div>
    </div> -->

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 消耗与转化趋势趋势图 -->
        <el-card class="chart-card" shadow="hover" v-loading="chartLoading">
          <template #header>
            <div class="chart-header">
              <span class="chart-title">消耗趋势</span>

            </div>
          </template>
          <div ref="revenueChartRef" class="chart-container"></div>
        </el-card>

        <!-- 点击率与转化率走势 -->
        <el-card class="chart-card" shadow="hover" v-loading="chartLoading">
          <template #header>
            <span class="chart-title">曝光走势</span>
          </template>
          <div ref="userChartRef" class="chart-container"></div>
        </el-card>
      </div>
    </div>


    <!-- AI智能体矩阵工作流 -->
    <div class="ai-workflow-section">
      <el-card class="workflow-card" shadow="hover">
        <template #header>
          <div class="workflow-header">
            <h2 class="workflow-title">
              <el-icon>
                <Cpu />
              </el-icon>
              AI智能体矩阵工作流
            </h2>
            <p class="workflow-subtitle">策划决策 → 创意执行 → 复盘优化，全流程AI助力，让投放更智能更高效</p>
          </div>
        </template>

        <div class="workflow-steps">
          <!-- 步骤1：广告活动·策划决策 -->
          <div class="workflow-step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h3 class="step-title">广告活动·策划决策</h3>
              <p class="step-description">万事开头难？让AI专家为您指明方向，在这里，完成市场分析、策略规划和用户调研。</p>
              <div class="step-tools">
                <div class="tool-item" @click="openAiChat('AI诊断专家')">
                  <el-icon>
                    <Search />
                  </el-icon>
                  <span>AI诊断专家</span>
                </div>
                <div class="tool-item" @click="openAiChat('信息流策划专家')">
                  <el-icon>
                    <Document />
                  </el-icon>
                  <span>信息流策划专家</span>
                </div>
                <div class="tool-item" @click="openAiChat('目标客群画像')">
                  <el-icon>
                    <User />
                  </el-icon>
                  <span>目标客群画像</span>
                </div>
                <div class="tool-item" @click="openAiChat('广告活动策划')">
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                  <span>广告活动策划</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤2：广告投放·创意执行 -->
          <div class="workflow-step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h3 class="step-title">广告投放·创意执行</h3>
              <p class="step-description">好的策略需要完美的创意来呈现，在这里，一键生成高质量的广告素材，让创意不再是难题。</p>
              <div class="step-tools">
                <div class="tool-item" @click="openAiChat('AI标题生成器')">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  <span>AI标题生成器</span>
                </div>
                <div class="tool-item" @click="openAiChat('AI媒体文案')">
                  <el-icon>
                    <Warning />
                  </el-icon>
                  <span>AI媒体文案</span>
                </div>
                <div class="tool-item" @click="toPoster()">
                  <el-icon>
                    <Picture />
                  </el-icon>
                  <span>AI海报设计</span>
                </div>
                <div class="tool-item" @click="openAiChat('AI落地页搭建')">
                  <el-icon>
                    <Link />
                  </el-icon>
                  <span>AI落地页搭建</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤3：广告效果·复盘优化 -->
          <div class="workflow-step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h3 class="step-title">广告效果·复盘优化</h3>
              <p class="step-description">数据是优化的生命线，在这里，让AI为您深度动销效果数据，找到问题，持续提升效果。</p>
              <div class="step-tools">
                <div class="tool-item" @click="openAiChat('每日数据复盘')">
                  <el-icon>
                    <DataAnalysis />
                  </el-icon>
                  <span>每日数据复盘</span>
                </div>
                <div class="tool-item" @click="openAiChat('转化率诊断')">
                  <el-icon>
                    <Promotion />
                  </el-icon>
                  <span>转化率诊断</span>
                </div>
                <div class="tool-item" @click="openAiChat('客群精准度分析')">
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                  <span>客群精准度分析</span>
                </div>
                <div class="tool-item" @click="openAiChat('私域承接力评估')">
                  <el-icon>
                    <Star />
                  </el-icon>
                  <span>私域承接力评估</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 工作流底部操作 -->
        <!-- <div class="workflow-actions">
          <el-button type="primary" size="large" @click="handleStartWorkflow">
            <el-icon><Right /></el-icon>
            开始AI工作流
          </el-button>
          <el-button type="default" size="large" @click="handleLearnMore">
            <el-icon><QuestionFilled /></el-icon>
            了解更多
          </el-button>
        </div> -->
      </el-card>
    </div>

    <!-- 创意灵感视频列表 -->
    <div class="video-section">
      <el-card class="video-list-card" shadow="hover">
        <template #header>
          <div class="section-header">
            <h2 class="section-title">
              <el-icon>
                <VideoPlay />
              </el-icon>
              创意灵感·近期热门投放视频
            </h2>
            <el-button type="primary" link @click="handleMoreVideos">
              查看更多 <el-icon>
                <ArrowRight />
              </el-icon>
            </el-button>
          </div>
        </template>

        <div class="video-grid-container">
          <div v-for="(video, index) in videoList" :key="index" class="video-card">
            <div class="video-thumbnail" @click="handleVideoPlay(video)">
              <img :src="video.thumbnail" :alt="video.title" />
              <div class="video-overlay">
                <el-icon class="play-icon">
                  <VideoPlay />
                </el-icon>
              </div>
              <div class="video-duration">{{ video.duration }}</div>
            </div>
            <div class="video-info">
              <h3 class="video-title">{{ video.title }}</h3>
              <div class="video-tags">
                <el-tag v-for="tag in video.tags.slice(0, 2)" :key="tag" size="small" :type="getTagType(tag)"
                  class="video-tag">
                  {{ tag }}
                </el-tag>
              </div>
              <div class="video-actions">
                <el-button size="small" type="primary" class="action-btn primary-btn">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  借鉴创意
                </el-button>
                <el-button size="small" type="info" class="action-btn info-btn">
                  <el-icon>
                    <DataAnalysis />
                  </el-icon>
                  查看数据
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="videoList.length === 0" class="video-empty">
          <el-empty description="暂无视频内容">
            <el-button type="primary" @click="handleAddVideo">
              <el-icon>
                <Plus />
              </el-icon>
              添加视频
            </el-button>
          </el-empty>
        </div>
      </el-card>
    </div>

    <!-- 视频播放弹框 -->
    <el-dialog v-model="videoDialogVisible" :title="currentVideo?.title || '视频播放'" width="45%"
      :before-close="closeVideoDialog" class="video-dialog" center>
      <div v-if="currentVideo" class="video-player-container">
        <div class="video-player">
          <video :src="currentVideo.url" :poster="currentVideo.thumbnail" controls autoplay width="100%" height="250">
            您的浏览器不支持视频播放
          </video>
        </div>
        <div class="video-details">
          <div class="video-meta">
            <span class="video-views">观看次数: {{ currentVideo.views }}</span>
            <span class="video-date">发布时间: {{ currentVideo.date }}</span>
          </div>
          <div class="video-description">
            <p>{{ currentVideo.title }}</p>
            <div class="video-tags-detail">
              <el-tag v-for="tag in currentVideo.tags" :key="tag" size="small" :type="getTagType(tag)"
                style="margin-right: 6px; margin-bottom: 6px;">
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="video-actions-dialog">
            <el-button type="primary" @click="handleInspireCreative(currentVideo)" class="dialog-action-btn">
              <el-icon>
                <EditPen />
              </el-icon>
              借鉴创意
            </el-button>
            <el-button type="info" @click="handleViewData(currentVideo)" class="dialog-action-btn">
              <el-icon>
                <DataAnalysis />
              </el-icon>
              查看数据
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- AI聊天对话框 -->
    <AiChatDialog v-model="aiChatVisible" :title="currentAiTool" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch, computed } from 'vue'
import {
  Money, User, ShoppingBag, TrendCharts,
  ArrowUp, ArrowDown, VideoPlay, ArrowRight, Plus, DataAnalysis, View, Mouse, Trophy, PriceTag, Cpu, Search, Document, EditPen, Warning, Picture, Link, Promotion, Star, Right, QuestionFilled, Refresh, Grid, Setting, UserFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { getAdvertiserList, getAdAccountsByAdvertiserId, type Advertiser, type AdAccount } from '@/api/advertiser'
import { getDashboardStats, getDashboardChartData, type DashboardStats, type ChartData } from '@/api/dashboard'
import AiChatDialog from '@/components/AiChatDialog.vue'
import router from '@/install/plugins/router'
// import { ro } from 'element-plus/es/locale'

const advertiserId = ref('');

// 轮播Banner数据
const bannerList = ref([
  {
    id: 1,
    title: '',
    description: '',
    image: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/fa0800d5-7e04-46f9-9c6d-6a5ed8172193.jpg',
    link: '/ai-advertising'
  },
  {
    id: 2,
    title: '',
    description: '',
    image: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/b6871b58-4a9e-43bc-91f3-6ee82b093949.jpg',
    link: '/cost-optimization'
  },
  {
    id: 3,
    title: '',
    description: '',
    image: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/efa1d799-279e-4743-a443-2d0c27b47711.jpg',
    link: '/ai-strategy'
  },
])

// 视频列表数据
const videoList = ref([
  {
    id: 1,
    title: '在{区县}，不管毛坯装修还是旧房翻新，都不要超过这个价！咨询看看报价，装修才不吃亏',
    thumbnail: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/b82591bf-6214-491f-99d8-177c8e7690f0.png',
    duration: '00:47',
    views: 1280,
    date: '2025-06-12',
    tags: ['高转化', '低成本'],
    url: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/278520f9-4082-4db0-90b3-6e8685d5cc46.mp4'
  },
  {
    id: 2,
    title: '今日本区欧派新开业，毛坯装修全包，含水电人工，送地板瓷砖，免费测算报价！',
    thumbnail: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/d1fa9db6-0b14-4bd3-925d-7cce69fc2de3.png',
    duration: '00:30',
    views: 2150,
    date: '2025-06-12',
    tags: ['高转化', '爆款技巧'],
    url: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/52b84ad0-26ea-4576-9dac-dacb366a1f92.mp4'
  },
  {
    id: 3,
    title: '{区县}60-200㎡的房子，全包装修要花多少钱？免费领(新)报价！',
    thumbnail: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/239006c2-fe8a-463b-bb37-c51242b43fea.png',
    duration: '00:33',
    views: 890,
    date: '2025-06-12',
    tags: ['低成本', '精准营销'],
    url: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/7005aaab-cc8f-47ba-8d3b-43aaf74a8f81.mp4'
  },
  {
    id: 4,
    title: '装修记住以下几个步骤，根本花不这么多钱#装修 #装修避坑 #成都业之峰装饰 #装修知识',
    thumbnail: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/e8b23dbf-29bf-4718-bdfe-14827d69a4d8.png',
    duration: '00:38',
    views: 1650,
    date: '2025-06-12',
    tags: ['高转化', '低成本'],
    url: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/13d86f7d-898b-4688-a716-76fc99c4165e.mp4'
  },
  {
    id: 5,
    title: '2025年本地装修要花多少钱？输入面积，立即预约抢占专属线上优惠名额',
    thumbnail: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/57d331d0-df5e-4bac-8eb3-bf09f008a34c.png',
    duration: '00:50',
    views: 1420,
    date: '2025-06-12',
    tags: ['高转化', '效果优化'],
    url: 'https://washoustatic.oss-cn-shanghai.aliyuncs.com/47274393-e1de-4f2e-96f2-ea890cf5dc25.mp4'
  }
])

// 响应式数据
const revenueTimePeriod = ref('30d')

// 筛选条件
const selectedAdvertiser = ref<number | ''>('')
const selectedAccount = ref<number | ''>('')
const selectedDays = ref('7')

// 主体和账户数据
const advertiserList = ref<Advertiser[]>([])
const accountList = ref<AdAccount[]>([])

// 加载状态
const advertiserLoading = ref(false)
const accountLoading = ref(false)
const statsLoading = ref(false)
const chartLoading = ref(false)

const account_name_arr = ref([])
const account_name = ref('');

// 视频播放弹框
const videoDialogVisible = ref(false)
const currentVideo = ref<any>(null)


// 广告数据
const dashboardStats = ref<DashboardStats>({
  dailyCost: 0,
  totalImpressions: 0,
  totalClicks: 0,
  clickRate: 0,
  totalConversions: 0,
  avgConversionCost: 0,
  potentialCustomers: 0,
  dayAvgCost: '￥0',
  cpm: '￥0',
  cpc: '￥0',
  clickPercent: '+0%',
  transferPercent: '0%',
  avgTarget: '<￥0',
  avgCustomer: '0%',
  wechat_num_ing: 0,
  new_wechat_num: 0,
  account_num: 0,
  ad_account_num: 0,
  ad_group_num: 0,
  creative_num: 0,
  preview_conversions_count: 0,
  preview_deep_conversions_count: 0,
  conversions_by_click_rate: '0%',
  conversions_by_click_cost: 0,
  conversions_by_click_count: 0,
})

// 图表数据
const chartData = ref<ChartData>({
  dates: [],
  costData: [],
  conversionData: [],
  clickRateData: [],
  conversionRateData: []
})

// 计算属性 - 兼容原有模板
const dailyCost = computed(() => dashboardStats.value.dailyCost)
const totalImpressions = computed(() => dashboardStats.value.totalImpressions)
const totalClicks = computed(() => dashboardStats.value.totalClicks)
const clickRate = computed(() => dashboardStats.value.clickRate)
const totalConversions = computed(() => dashboardStats.value.totalConversions)
const avgConversionCost = computed(() => dashboardStats.value.avgConversionCost)
const potentialCustomers = computed(() => dashboardStats.value.potentialCustomers)
const day_avg_cost = computed(() => dashboardStats.value.dayAvgCost)
const cpm = computed(() => dashboardStats.value.cpm)
const cpc = computed(() => dashboardStats.value.cpc)
const click_persent = computed(() => dashboardStats.value.clickPercent)
const transfer_persent = computed(() => dashboardStats.value.transferPercent)
const avg_target = computed(() => dashboardStats.value.avgTarget)
const avg_customer = computed(() => dashboardStats.value.avgCustomer)
const wechat_num_ing = computed(() => dashboardStats.value.wechat_num_ing)
const new_wechat_num = computed(() => dashboardStats.value.new_wechat_num)
const account_num = computed(() => dashboardStats.value.account_num)
const ad_account_num = computed(() => dashboardStats.value.ad_account_num)
const ad_group_num = computed(() => dashboardStats.value.ad_group_num)
const creative_num = computed(() => dashboardStats.value.creative_num)
const preview_conversions_count = computed(() => dashboardStats.value.preview_conversions_count)
const preview_deep_conversions_count = computed(() => dashboardStats.value.preview_deep_conversions_count)
const conversions_by_click_rate = computed(() => dashboardStats.value.conversions_by_click_rate)
const conversions_by_click_cost = computed(() => dashboardStats.value.conversions_by_click_cost)
const conversions_by_click_count = computed(() => dashboardStats.value.conversions_by_click_count)

// 图表引用
const revenueChartRef = ref<HTMLElement>()
const userChartRef = ref<HTMLElement>()

// 方法
const formatNumber = (num: number) => {
  return num.toLocaleString()
}

// Banner点击处理
const handleBannerClick = (banner: any) => {
  ElMessage.info(`点击了Banner: ${banner.title}`)
  // 这里可以添加跳转逻辑
  // router.push(banner.link)
}

// 视频播放处理
const handleVideoPlay = (video: any) => {
  currentVideo.value = video
  videoDialogVisible.value = true
  ElMessage.info(`正在播放视频: ${video.title}`)
}

// 关闭视频弹框
const closeVideoDialog = () => {
  videoDialogVisible.value = false
  currentVideo.value = null
}

const toPoster = () => {
  location.href = '/#/poster/index';
}

// 查看更多视频
const handleMoreVideos = () => {
  // ElMessage.info('跳转到视频列表页面')
  // router.push('/videos')
}

// 添加视频
const handleAddVideo = () => {
  ElMessage.info('跳转到视频上传页面')
  // router.push('/videos/upload')
}

// 标签类型映射
const getTagType = (tag: string): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  const tagMap: Record<string, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    '高转化': 'success',
    '低成本': 'warning',
    '营销趋势': 'info',
    '短视频': 'primary',
    '数据分析': 'info',
    '创意制作': 'success',
    '视频编辑': 'warning',
    '爆款技巧': 'danger',
    '品牌故事': 'info',
    '内容营销': 'success',
    '情感连接': 'warning',
    '社交媒体': 'primary',
    '投放策略': 'info',
    '效果优化': 'success',
    '用户画像': 'warning',
    '精准营销': 'success',
    '文案写作': 'info',
    '创意表达': 'primary',
    '内容创作': 'warning'
  }
  return tagMap[tag] || 'info'
}

// 催生创意
const handleInspireCreative = (video: any) => {
  ElMessage.success(`正在为"${video.title}"生成创意灵感...`)
  // 这里可以调用AI生成创意的接口
}

// 查看数据
const handleViewData = (video: any) => {
  ElMessage.info(`查看"${video.title}"的详细数据`)
  // 这里可以跳转到数据详情页
}

// AI工作流相关方法
const handleStartWorkflow = () => {
  ElMessage.success('正在启动AI工作流，即将跳转到工作台...')
  // router.push('/ai-workflow')
}

const handleLearnMore = () => {
  ElMessage.info('跳转到帮助文档页面')
  // router.push('/help/workflow')
}

// 获取默认统计数据
const getDefaultStats = (): DashboardStats => ({
  dailyCost: 0,
  totalImpressions: 0,
  totalClicks: 0,
  clickRate: 0,
  totalConversions: 0,
  avgConversionCost: 0,
  potentialCustomers: 0,
  dayAvgCost: '￥0',
  cpm: '￥0',
  cpc: '￥0',
  clickPercent: '+0%',
  transferPercent: '0%',
  avgTarget: '<￥0',
  avgCustomer: '0%',
  preview_conversions_count: 0,
  preview_deep_conversions_count: 0,
  conversions_by_click_rate: '0%',
  conversions_by_click_cost: 0,
  conversions_by_click_count: 0,
})

// 获取默认图表数据
const getDefaultChartData = (): ChartData => ({
  dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  costData: [0, 0, 0, 0, 0, 0, 0],
  conversionData: [0, 0, 0, 0, 0, 0, 0],
  clickRateData: [0, 0, 0, 0, 0, 0, 0],
  conversionRateData: [0, 0, 0, 0, 0, 0, 0]
})

// 处理API响应数据
const processStatsResponse = (response: any): DashboardStats => {
  // 如果API返回的数据结构与接口定义不同，在这里进行转换
  if (response.data) {
    return {
      dailyCost: response.data.dailyCost || 0,
      // totalImpressions: response.data.totalImpressions || 0,
      totalImpressions: response.data.push_count || 0,
      totalClicks: response.data.totalClicks || 0,
      clickRate: response.data.clickRate || 0,
      totalConversions: response.data.totalConversions || 0,
      avgConversionCost: response.data.avgConversionCost || 0,
      potentialCustomers: response.data.potentialCustomers || 0,
      dayAvgCost: response.data.dayAvgCost || '￥0',
      cpm: response.data.cpm || '￥0',
      cpc: response.data.cpc || '￥0',
      clickPercent: response.data.clickPercent || '+0%',
      transferPercent: response.data.transferPercent || '0%',
      avgTarget: response.data.avgTarget || '<￥0',
      avgCustomer: response.data.avgCustomer || '0%',
      wechat_num_ing: response.data.wechat_num_ing || 0,
      new_wechat_num: response.data.new_wechat_num || 0,
      account_num: response.data.account_num || 0,
      ad_account_num: response.data.ad_account_num || 0,
      ad_group_num: response.data.ad_group_num || 0,
      creative_num: response.data.creative_num || 0,
      preview_conversions_count: response.data.preview_conversions_count || 0,
      preview_deep_conversions_count: response.data.preview_deep_conversions_count || 0,
      conversions_by_click_rate: response.data.preview_deep_conversions_count || 0,
      conversions_by_click_cost: response.data.conversions_by_click_cost || 0,
      conversions_by_click_count: response.data.conversions_by_click_count || 0,
    }
  }
  return response
}

// 处理图表数据响应
const processChartResponse = (response: any): ChartData => {
  // 如果API返回的数据结构与接口定义不同，在这里进行转换
  console.log('图表：', response.data);
  if (response.data) {
    return {
      dates: response.data.dates || [],
      costData: response.data.costData || [],
      conversionData: response.data.conversionData || [],
      clickRateData: response.data.clickRateData || [],
      conversionRateData: response.data.conversionRateData || []
    }
  }
  return response
}

// 获取仪表板统计数据
const fetchDashboardStats = async () => {
  try {
    statsLoading.value = true
    const params = {
      advertiserId: selectedAdvertiser.value as number || undefined,
      accountId: selectedAccount.value as number || undefined,
      days: selectedDays.value
    }

    console.log('获取仪表板统计数据参数:', params)
    const response = await getDashboardStats(params)

    if (response.code === 1) {
      dashboardStats.value = processStatsResponse(response)
      console.log('仪表板统计数据加载成功:', dashboardStats.value)
    } else {
      throw new Error(response.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('获取仪表板统计数据失败:', error)
    // ElMessage.error('获取统计数据失败，请重试')

    // 如果API失败，设置默认值
    dashboardStats.value = getDefaultStats()
  } finally {
    statsLoading.value = false
  }
}

// 获取图表数据
const fetchChartData = async () => {
  try {
    chartLoading.value = true
    const params = {
      advertiserId: selectedAdvertiser.value as number || undefined,
      accountId: selectedAccount.value as number || undefined,
      days: selectedDays.value
    }

    console.log('获取图表数据参数:', params)
    const response = await getDashboardChartData(params)

    if (response.code === 1) {
      chartData.value = processChartResponse(response)
      console.log('图表数据加载成功:', chartData.value)

      // 更新图表
      nextTick(() => {
        initRevenueChart()
        initUserChart()
      })
    } else {
      throw new Error(response.message || '获取图表数据失败')
    }
  } catch (error) {
    console.error('获取图表数据失败:', error)
    ElMessage.error('获取图表数据失败，请重试')

    // 如果API失败，设置默认值
    chartData.value = getDefaultChartData()

    // 即使是默认数据也要更新图表
    nextTick(() => {
      initRevenueChart()
      initUserChart()
    })
  } finally {
    chartLoading.value = false
  }
}

// 刷新所有数据
const refreshAllData = async () => {
  await Promise.all([
    fetchDashboardStats(),
    fetchChartData()
  ])
}

// 初始化收入趋势图
const initRevenueChart = () => {
  if (!revenueChartRef.value) return

  const chart = echarts.init(revenueChartRef.value)
  const option = {
    grid: { top: '10%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
    legend: {
      top: '5%',
      data: ['消耗']
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.value.dates.length > 0 ? chartData.value.dates : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [{
      name: '消耗',
      data: chartData.value.costData.length > 0 ? chartData.value.costData : [8200, 9320, 9010, 9340, 12900, 13300, 13200],
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
      },
      lineStyle: { color: '#409EFF' },
      itemStyle: { color: '#409EFF' }
    }],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params: any) {
        let result = params[0].name + '<br/>'
        params.forEach((item: any) => {
          result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
        })
        return result
      }
    }
  }
  chart.setOption(option)

  // 监听窗口大小变化，重新计算图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  // 延迟调整大小，确保容器已经渲染
  setTimeout(() => {
    chart.resize()
  }, 100)
}

// 初始化用户分析图
const initUserChart = () => {
  if (!userChartRef.value) return

  const chart = echarts.init(userChartRef.value)
  const option = {
    grid: { top: '15%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
    legend: {
      top: '5%',
      data: ['曝光']
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.value.dates.length > 0 ? chartData.value.dates : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      name: '曝光数',
      position: 'left',
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '曝光',
        type: 'line',
        data: chartData.value.conversionData.length > 0 ? chartData.value.conversionData : [1000, 1200, 1100, 1300, 1800, 2000, 1900],
        smooth: true,
        lineStyle: {
          color: '#67C23A',
          width: 3
        },
        itemStyle: { color: '#67C23A' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ])
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params: any) {
        let result = params[0].name + '<br/>'
        params.forEach((item: any) => {
          result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
        })
        return result
      }
    }
  }
  chart.setOption(option)

  // 监听窗口大小变化，重新计算图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  // 延迟调整大小，确保容器已经渲染
  setTimeout(() => {
    chart.resize()
  }, 100)
}


// 获取主体列表
const fetchAdvertiserList = async () => {
  try {
    advertiserLoading.value = true
    const response = await getAdvertiserList();
    console.log(response);
    if (response.code === 1) {

      account_name_arr.value = response.list || []
      //   ElMessage.success('主体列表加载成功')
    } else {
      throw new Error(response.message || '获取主体列表失败')
    }
  } catch (error) {
    console.error('获取主体列表失败:', error)
    ElMessage.error('获取主体列表失败，请检查网络连接')
    advertiserList.value = []
  } finally {
    advertiserLoading.value = false
  }
}

// 获取账户列表
const fetchAccountList = async (advertiserId: number) => {
  if (!advertiserId) {
    accountList.value = []
    return
  }

  try {
    accountLoading.value = true
    const response = await getAdAccountsByAdvertiserId(advertiserId)
    console.log(response);
    if (response.code === 1) {
      accountList.value = response.list || []
      if (response.list.length > 0) {
        // ElMessage.success(`成功加载${response.data.length}个账户`)
      } else {
        ElMessage.info('该主体下暂无账户')
      }
    } else {
      throw new Error(response.message || '获取账户列表失败')
    }
  } catch (error) {
    console.error('获取账户列表失败:', error)
    ElMessage.error('获取账户列表失败，请重试')
    accountList.value = []
  } finally {
    accountLoading.value = false
  }
}

// 监听主体选择变化
watch(selectedAdvertiser, (newAdvertiserId) => {
  selectedAccount.value = '' // 清空账户选择
  if (newAdvertiserId) {
    fetchAccountList(newAdvertiserId as number)
  } else {
    accountList.value = []
  }
})

// 监听筛选条件变化
watch([selectedAdvertiser, selectedAccount, selectedDays], () => {
  refreshAllData()
}, { deep: true })

onMounted(() => {
  // 获取主体列表
  fetchAdvertiserList()

  // 获取初始数据
  refreshAllData()

  // 延迟初始化图表，确保DOM完全渲染
  setTimeout(() => {
    nextTick(() => {
      initRevenueChart()
      initUserChart()
    })
  }, 300)
})

// 打开AI聊天对话框
const openAiChat = (toolName?: string) => {
  currentAiTool.value = toolName || 'AI诊断专家'
  aiChatVisible.value = true
}

// AI聊天对话框状态
const aiChatVisible = ref(false)
const currentAiTool = ref('AI诊断专家')

</script>

<style scoped>
.dashboard-container {
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* Banner轮播样式 */
.banner-section {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
}

.banner-image-item {
  width: 100%;
  height: 559px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  border-radius: 12px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: initial;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: rgba(0, 0, 0, 0.3); */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}



.banner-info {
  text-align: center;
}

.banner-overlay-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.banner-overlay-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 统计卡片样式 */
.stats-section {
  padding: 0 20px;
  margin-bottom: 30px;
}

.stats-header {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stats-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stats-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  gap: 8px;
  color: #1f2937;
}

.filter-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.stat-card {
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-gradient));
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
  z-index: 0;
}

.stat-card:nth-child(1) {
  --card-gradient: #10b981, #34d399;
}

.stat-card:nth-child(2) {
  --card-gradient: #3b82f6, #60a5fa;
}

.stat-card:nth-child(3) {
  --card-gradient: #f59e0b, #fbbf24;
}

.stat-card:nth-child(4) {
  --card-gradient: #ef4444, #f87171;
}

.stat-card:nth-child(5) {
  --card-gradient: #8b5cf6, #a78bfa;
}

.stat-card:nth-child(6) {
  --card-gradient: #f97316, #fb923c;
}

.stat-card:nth-child(7) {
  --card-gradient: #06b6d4, #22d3ee;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 16px;
  height: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 0;
  gap: 12px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  box-shadow:
    0 3px 15px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.stat-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  border-radius: 12px;
}

.stat-icon.daily-cost {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.stat-icon.total-impressions {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.stat-icon.total-clicks {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.stat-icon.click-rate {
  background: linear-gradient(135deg, #ef4444, #f87171);
}

.stat-icon.total-conversions {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.stat-icon.avg-conversion-cost {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.stat-icon.potential-customers {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.stat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  padding: 2px 0;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.stat-change.positive {
  color: #059669;
  background: linear-gradient(135deg,
      rgba(16, 185, 129, 0.15) 0%,
      rgba(52, 211, 153, 0.1) 100%);
}

.stat-change.negative {
  color: #dc2626;
  background: linear-gradient(135deg,
      rgba(239, 68, 68, 0.15) 0%,
      rgba(248, 113, 113, 0.1) 100%);
}

/* 轮播指示器样式 */
:deep(.el-carousel__indicators) {
  bottom: 15px;
}

:deep(.el-carousel__indicator) {
  padding: 6px 3px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .stats-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  .banner-section,
  .stats-section {
    padding: 0 15px;
  }

  .banner-image-item {
    height: 400px;
  }

  .banner-overlay-title {
    font-size: 28px;
  }

  .banner-overlay-description {
    font-size: 14px;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .filter-controls {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .filter-controls .el-select {
    width: 100% !important;
  }

  .stat-value {
    font-size: 16px;
  }

  .stat-label {
    font-size: 11px;
  }

  .stat-change {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}

/* 图表区域样式 */
.charts-section {
  margin-bottom: 30px;
  padding: 0 20px;
}

.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 12px;
  min-height: 400px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.chart-container {
  width: 100%;
  height: 320px;
}

/* 视频列表样式 */
.video-section {
  margin-bottom: 30px;
  padding: 0 15px;
}

.video-list-card {
  border-radius: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  gap: 10px;
  margin: 0;
}

.video-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  padding: 20px 0;
}

.video-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 280px;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 32px;
  color: white;
  background: rgba(64, 158, 255, 0.8);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-icon:hover {
  background: rgba(64, 158, 255, 1);
  transform: scale(1.1);
}

.video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.video-info {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.video-title {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
  flex-shrink: 0;
}

.video-tags {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 24px;
}

.video-tag {
  font-size: 10px;
  border-radius: 8px;
  padding: 1px 6px;
}

.video-actions {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-top: auto;
  flex-shrink: 0;
}

.action-btn {
  flex: 1;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 28px;
}

.action-btn .el-icon {
  font-size: 11px;
}

.primary-btn {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(135deg, #337ECC, #409EFF);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.info-btn {
  background: linear-gradient(135deg, #909399, #B1B3B8);
  color: white;
  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
}

.info-btn:hover {
  background: linear-gradient(135deg, #73767A, #909399);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.4);
}

.video-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

/* 响应式设计 */
@media (max-width: 1200px) and (min-width: 769px) {
  .video-grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 小屏平板 */
@media (max-width: 992px) and (min-width: 769px) {
  .video-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 六宫格功能区域样式 */
.hexagon-section {
  margin-bottom: 30px;
  padding: 0 20px;
}

.hexagon-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.hexagon-header {
  text-align: center;
  padding: 20px 0;
}

.hexagon-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  gap: 12px;
  margin: 0 0 10px 0;
}

.hexagon-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.hexagon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  padding: 30px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.hexagon-item {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 25px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hexagon-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

.hexagon-item:hover .hexagon-icon {
  transform: scale(1.1);
}

.hexagon-item:nth-child(1):hover .hexagon-badge {
  background: rgba(16, 185, 129, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(2):hover .hexagon-badge {
  background: rgba(59, 130, 246, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(3):hover .hexagon-badge {
  background: rgba(245, 158, 11, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(4):hover .hexagon-badge {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(5):hover .hexagon-badge {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(6):hover .hexagon-badge {
  background: rgba(249, 115, 22, 0.2);
  transform: scale(1.05);
}

.hexagon-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  box-shadow:
    0 3px 15px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.hexagon-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  border-radius: 12px;
}

.hexagon-item:nth-child(1) .hexagon-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.hexagon-item:nth-child(2) .hexagon-icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.hexagon-item:nth-child(3) .hexagon-icon {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.hexagon-item:nth-child(4) .hexagon-icon {
  background: linear-gradient(135deg, #ef4444, #f87171);
}

.hexagon-item:nth-child(5) .hexagon-icon {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.hexagon-item:nth-child(6) .hexagon-icon {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

/* 徽章颜色定制 */
.hexagon-item:nth-child(1) .hexagon-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.hexagon-item:nth-child(2) .hexagon-badge {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.hexagon-item:nth-child(3) .hexagon-badge {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.hexagon-item:nth-child(4) .hexagon-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.hexagon-item:nth-child(5) .hexagon-badge {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.hexagon-item:nth-child(6) .hexagon-badge {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.hexagon-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.hexagon-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.hexagon-item-desc {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

.hexagon-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-section {
    padding: 0 15px;
  }

  .hexagon-section {
    padding: 0 15px;
  }

  .hexagon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 15px;
  }

  .hexagon-item {
    min-height: 140px;
    padding: 20px;
  }

  .hexagon-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
    margin-bottom: 12px;
  }

  .hexagon-item-title {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .hexagon-item-desc {
    font-size: 12px;
  }

  .hexagon-badge {
    top: 12px;
    right: 12px;
    font-size: 9px;
    padding: 2px 6px;
  }

  .banner-image-item {
    height: 250px;
  }

  .stats-section,
  .charts-section,
  .video-section,
  .ai-workflow-section {
    padding: 0 15px;
  }

  .video-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .video-thumbnail {
    height: 100px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .filter-controls {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .filter-controls .el-select {
    width: 100% !important;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .chart-row {
    grid-template-columns: 1fr;
  }

  .workflow-steps {
    grid-template-columns: 1fr;
    padding: 20px 10px;
  }

  .workflow-step {
    padding: 20px 15px;
  }

  .step-tools {
    grid-template-columns: 1fr;
  }

  /* 移动端视频弹框优化 */
  :deep(.video-dialog .el-dialog) {
    width: 90% !important;
    margin-top: 8vh;
  }

  .video-player video {
    height: 180px;
  }

  .video-details {
    padding: 12px;
  }

  .video-actions-dialog {
    flex-direction: column;
    gap: 6px;
  }

  .dialog-action-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .video-meta {
    flex-direction: column;
    gap: 6px;
  }

  /* 移动端视频卡片优化 */
  .video-card {
    height: 250px;
  }

  .video-info {
    padding: 8px;
  }

  .video-title {
    font-size: 12px;
    height: 30px;
    margin-bottom: 4px;
  }

  .video-tags {
    margin-bottom: 4px;
    min-height: 20px;
  }

  .action-btn {
    font-size: 9px;
    padding: 4px 6px;
    min-height: 24px;
    gap: 2px;
  }

  .action-btn .el-icon {
    font-size: 10px;
  }
}

/* 中等屏幕优化 */
@media (max-width: 1024px) and (min-width: 769px) {
  :deep(.video-dialog .el-dialog) {
    width: 60% !important;
  }

  .video-player video {
    height: 220px;
  }
}

/* 轮播样式优化 - 移除原有样式 */
:deep(.el-carousel__container) {
  border-radius: 12px;
  overflow: hidden;
  /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); */
}

:deep(.el-carousel__item) {
  border-radius: 0;
  overflow: hidden;
  transition: none;
}

:deep(.el-carousel__item.is-active) {
  transform: none;
}

:deep(.el-carousel__item:not(.is-active)) {
  transform: none;
  opacity: 1;
}

/* AI智能体矩阵工作流样式 */
.ai-workflow-section {
  margin-bottom: 30px;
  padding: 0 20px;
}

.workflow-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.workflow-header {
  text-align: center;
  padding: 20px 0;
}

.workflow-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  gap: 12px;
  margin: 0 0 10px 0;
}

.workflow-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
  padding: 30px 20px;
}

.workflow-step {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 25px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.workflow-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

.workflow-step:nth-child(1) {
  border-top: 4px solid #10b981;
}

.workflow-step:nth-child(2) {
  border-top: 4px solid #3b82f6;
}

.workflow-step:nth-child(3) {
  border-top: 4px solid #f59e0b;
}

.step-number {
  position: absolute;
  top: -15px;
  left: 25px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.step-content {
  margin-top: 15px;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-description {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.6;
}

.step-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tool-item:hover {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.tool-item .el-icon {
  font-size: 16px;
  color: #6b7280;
}

.tool-item:hover .el-icon {
  color: #3b82f6;
}

.workflow-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 30px 20px 20px;
  border-top: 1px solid #e5e7eb;
  margin-top: 20px;
}

.workflow-actions .el-button {
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

.workflow-actions .el-button--primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.workflow-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.workflow-actions .el-button--default {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  color: #6b7280;
}

.workflow-actions .el-button--default:hover {
  border-color: #3b82f6;
  color: #1d4ed8;
  background: #eff6ff;
}

/* 视频播放弹框样式 */
:deep(.video-dialog .el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.video-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 24px;
}

:deep(.video-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

:deep(.video-dialog .el-dialog__body) {
  padding: 0;
}

.video-player-container {
  background: #000;
}

.video-player {
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player video {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.video-details {
  background: #fff;
  padding: 16px 20px;
}

.video-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #6b7280;
}

.video-views,
.video-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-description p {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 10px;
  line-height: 1.4;
}

.video-tags-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-actions-dialog {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.dialog-action-btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.dialog-action-btn .el-icon {
  font-size: 14px;
}

.dialog-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 优化视频缩略图的点击效果 */
.video-thumbnail {
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-thumbnail:hover {
  transform: scale(1.02);
}

.video-thumbnail:hover .video-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

.video-thumbnail:hover .play-icon {
  transform: scale(1.1);
  background: rgba(64, 158, 255, 1);
}

/* 六宫格功能区域样式 */
.hexagon-section {
  margin-bottom: 30px;
  padding: 0 20px;
}

.hexagon-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.hexagon-header {
  text-align: center;
  padding: 20px 0;
}

.hexagon-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  gap: 12px;
  margin: 0 0 10px 0;
}

.hexagon-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.hexagon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  padding: 30px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.hexagon-item {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 25px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hexagon-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

.hexagon-item:hover .hexagon-icon {
  transform: scale(1.1);
}

.hexagon-item:nth-child(1):hover .hexagon-badge {
  background: rgba(16, 185, 129, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(2):hover .hexagon-badge {
  background: rgba(59, 130, 246, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(3):hover .hexagon-badge {
  background: rgba(245, 158, 11, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(4):hover .hexagon-badge {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(5):hover .hexagon-badge {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.05);
}

.hexagon-item:nth-child(6):hover .hexagon-badge {
  background: rgba(249, 115, 22, 0.2);
  transform: scale(1.05);
}

.hexagon-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  box-shadow:
    0 3px 15px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.hexagon-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.1) 100%);
  border-radius: 12px;
}

.hexagon-item:nth-child(1) .hexagon-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.hexagon-item:nth-child(2) .hexagon-icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.hexagon-item:nth-child(3) .hexagon-icon {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.hexagon-item:nth-child(4) .hexagon-icon {
  background: linear-gradient(135deg, #ef4444, #f87171);
}

.hexagon-item:nth-child(5) .hexagon-icon {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.hexagon-item:nth-child(6) .hexagon-icon {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

/* 徽章颜色定制 */
.hexagon-item:nth-child(1) .hexagon-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.hexagon-item:nth-child(2) .hexagon-badge {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.hexagon-item:nth-child(3) .hexagon-badge {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.hexagon-item:nth-child(4) .hexagon-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.hexagon-item:nth-child(5) .hexagon-badge {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.hexagon-item:nth-child(6) .hexagon-badge {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.hexagon-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.hexagon-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.hexagon-item-desc {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

.hexagon-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

/* 500x500尺寸的六宫格样式覆盖 */
.hexagon-section {
  width: 100% !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.hexagon-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.hexagon-grid {
  /* gap: 8px !important; */
  padding: 12px !important;
  flex: 1 !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.hexagon-item {
  min-height: 120px !important;
  padding: 15px !important;
  border-radius: 12px !important;
}

.hexagon-icon {
  width: 35px !important;
  height: 35px !important;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}

.hexagon-item-title {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.hexagon-item-desc {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.hexagon-badge {
  top: 10px !important;
  right: 10px !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
}

/* 数据展示样式 */
.hexagon-item.data-item .hexagon-content {
  text-align: center !important;
  justify-content: center !important;
}

.hexagon-data-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hexagon-data-label {
  font-size: 14px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 数据项图标居中 */
.hexagon-item.data-item {
  text-align: center !important;
}

.hexagon-item.data-item .hexagon-icon {
  margin: 0 auto 8px auto !important;
}
</style>